<template>
  <view class="content">
    <u-navbar rightText="删除" :placeholder='true' title="編輯" leftIcon="arrow-leftward"
              @leftClick="leftClick('/pages/mine/setting/person/index')" @rightClick="dele">
    </u-navbar>
    <view class="main">
      <view>
        <view class="form">
          <view class="form-l">
            ID
          </view>
          <view class="form-r">
            <input disabled v-model="user.user_id" class="input-item" type="text">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            登錄名
          </view>
          <view class="form-r">
            <input disabled v-model="user.username" class="input-item" type="text">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            密碼
            <text style="color:#ED0000 ;">*</text>
          </view>
          <view class="form-r">
            <input v-model="user.password" class="input-item" type="password">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            郵箱
            <text style="color:#ED0000 ;">*</text>
          </view>
          <view class="form-r">
            <input v-model="user.email" class="input-item" type="text">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            聯絡人姓名
          </view>
          <view class="form-r">
            <input v-model="user.truename" class="input-item" type="text">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            員工編號
          </view>
          <view class="form-r">
            <input v-model="user.personal_sn" class="input-item" type="text">
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            所屬市場
          </view>
          <view class="form-r">
            <picker @change="typeChange" :value="typeindex" :range="options.cn_type">
              <view class="picker">
                <view class="uni-input">{{ user.market }}</view>
                <u-icon size="28rpx" name="arrow-right"></u-icon>
              </view>
            </picker>
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            所屬公司
          </view>
          <view class="form-r">
            <picker @change="companyChange" :value="companyindex" :range="company" range-key="branchname">
              <view class="picker">
                <view class="uni-input">{{ getBranchnameById(user.branch_id) }}</view>
                <!-- <view class="uni-input">{{company[companyindex].branchname}}</view> -->
                <u-icon size="28rpx" name="arrow-right"></u-icon>
              </view>
            </picker>
          </view>
        </view>
        <view class="form">
          <view class="form-l">
            所屬部門
          </view>
          <view class="form-r">
            <picker @change="departmentChange" :value="departmentindex" :range="department"
                    range-key="departmentname">
              <view class="picker">
                <view class="uni-input">{{ getDepartmentnameById(user.department_id) }}</view>
                <u-icon size="28rpx" name="arrow-right"></u-icon>
              </view>
            </picker>
          </view>
        </view>
        <view class="form" style="border-bottom: none;">
          <view class="form-l">
            權限
          </view>
          <view class="form-r">
            <view class="picker" @click="leftClick('/pages/mine/setting/person/rule')">
              <view class="uni-input">請選擇</view>
              <u-icon size="28rpx" name="arrow-right"></u-icon>
            </view>
          </view>
        </view>
        <!--  -->
        <view style="width: 750rpx;height: 16rpx;background: #F5F6F9;opacity: 1;border-radius: 0rpx;">
        </view>
        <view style="">
          <!-- 		<view class="form">
            <view class="form-l">
              選擇地址
            </view>
            <view class="form-r">
              <view class="picker">
                <view class="uni-input">請選擇</view>
                <u-icon size="28rpx" name="arrow-right"></u-icon>
              </view>
            </view>
          </view> -->
          <view class="form">
            <view class="form-l">
              報價單審批
            </view>
            <view class="form-r">
              <picker @change="baojiachange" :value="baojiaindex" :range="kuabumen">
                <view class="picker">
                  <view class="uni-input">{{ kuabumen[baojiaindex] }}</view>
                  <u-icon size="28rpx" name="arrow-right"></u-icon>
                </view>
              </picker>
            </view>
          </view>
          <view class="form">
            <view class="form-l">
              訂單指定審批
            </view>
            <view class="form-r">
              <picker @change="dindanchange" :value="dindanindex" :range="kuabumen">
                <view class="picker">
                  <view class="uni-input">{{ kuabumen[dindanindex] }}</view>
                  <u-icon size="28rpx" name="arrow-right"></u-icon>
                </view>
              </picker>
            </view>
          </view>
          <view class="form">
            <view class="form-l">
              跨部門管理
            </view>
            <view class="form-r">
              <view class="picker" @click="leftClick('/pages/mine/setting/person/Order/department')">
                <view class="uni-input">請選擇</view>
                <u-icon size="28rpx" name="arrow-right"></u-icon>
              </view>
            </view>
          </view>

        </view>
      </view>
    </view>
    <view class="btn" @click="submit">
      確定
    </view>
  </view>
</template>

<script>
import {
  mapState
} from 'vuex'
import {
  edituser,
  getedituser,
  getuserdepartment,
  getdepartment_list,
  getaddress,
  deluser
} from '@/network/api/setting.js'
import {
  addAddress
} from '../../../../network/api/cart'

export default {
  data() {
    return {
      kuabumen: ['否', '是'],
      baojiaindex: 0,
      dindanindex: 0,
      departmentindex: 0,
      companyindex: 0,
      company: [], //所属公司，
      department: [], //部门
      user_id: '',
      array: [],
      typeindex: 0,
      value: false,
      user: {},
      options: {
        cn_regions: [
          "香港",
          "澳門"
        ],
        cn_type: [
          "博彩業",
          "工業",
          "服務業",
          "郵電",
          "通信",
          "社區服務",
          "批發",
          "零售業",
          "慈善機構"
        ],
      },
      addresslist: []
    }
  },
  onLoad(e) {
    this.user_id = e.user_id
  },
  computed: {
    ...mapState({
      userinfo: state => state.user.userinfo,
    })
  },
  onShow() {

    this.getcomany(),
        this.getdepartment(),
        this.getaddresslist()
    this.getuserinfo()
    uni.removeStorageSync('jurisdiction');
    uni.removeStorageSync('powers');
  },
  methods: {
    baojiachange(e) {
      this.baojiaindex = e.detail.value
      console.log(this.baojiaindex);
      this.user.quote_status = this.baojiaindex
    },
    dindanchange(e) {
      this.dindanindex = e.detail.value
      this.user.order_status = this.dindanindex
    },
    async dele() {
      let that = this
      //确定删除该用户提示？
      uni.showModal({
        title: "提示",
        content: "确定删除该用户？",
        success: async (res) => {
          if (res.confirm) {
            let data = {
              user_id: that.user.id
            }
            const res = await deluser(data)
            if (res.data.code == 1) {
              uni.navigateBack({
                delta: 1
              })
            }
          } else if (res.cancel) {
          }
        }
      })

    },
    async submit() {
      if (!this.user.password) {
        return uni.showToast({
          title: '密碼不能为空',
          icon: 'none'
        })
      }
      if (!this.user.email) {
        return uni.showToast({
          title: '郵箱不能为空',
          icon: 'none'
        })
      }
      let jurisdiction = uni.getStorageSync('jurisdiction')
      let powers = uni.getStorageSync('powers')
      this.user.jurisdiction = jurisdiction
      this.user.powers = powers
      this.user.flow_id = '',
          console.log(this.user);
      uni.showLoading({
        title: '提交中，请稍后..',
      })
      const res = await edituser(this.user)
      uni.hideLoading()
      if (res.data.code == 1) {
        uni.showToast({
          title: '修改成功',
        })
        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          })
        }, 1000);
      }
    },
    async getaddresslist() {
      let data = {
        search: '',
        sortAttr: '',
        sortMode: '',
        page: 1,
        limit: 'all'
      }
      const res = await getaddress(data)
      this.addresslist = res.data.address

    },
    departmentChange(e) {
      this.departmentindex = e.detail.value
      this.user.department_id = this.department[this.departmentindex].department_id
    },
    async getdepartment() {
      let data = {
        company_id: this.userinfo.company_id,
        branch_id: '',
      }
      const res = await getdepartment_list(data)
      this.department = res.data.department
    },
    typeChange(e) {
      console.log('picker发送选择改变，携带值为', e.detail.value)
      this.typeindex = e.detail.value
      this.user.market = this.options.cn_type[this.typeindex]
    },
    companyChange(e) {
      this.companyindex = e.detail.value
      this.user.branch_id = this.company[this.companyindex].branch_id
    },

    async getcomany() {
      let data = {
        company_id: this.userinfo.company_id,
      }
      const res = await getuserdepartment(data)
      this.company = res.data.branch
    },
    async getuserinfo() {
      let data = {
        user_id: this.user_id
      }
      const res = await getedituser(data)
      this.user = res.data.member
    },
    leftClick(url) {
      uni.navigateTo({
        url: url,

      })
    },
    getBranchnameById(id) {
      for (let i = 0; i < this.company.length; i++) {
        if (this.company[i].branch_id === id) {
          return this.company[i].branchname;
        }
      }
      return null; // Return null if no matching branch_id is found
    },
    getDepartmentnameById(id) {
      for (let i = 0; i < this.department.length; i++) {
        if (this.department[i].department_id === id) {
          return this.department[i].departmentname;
        }
      }
      return null; // Return null if no matching department_id is found
    },

  }
}
</script>

<style lang="scss">
.content {
  background-color: #F5F6F9;
  width: 100%;
  min-height: 1982rpx;
  position: relative;

  .main {
    background-color: #fff;

    .form {
      margin: 0 32rpx;
      padding: 32rpx 0;
      display: flex;
      border-bottom: 1rpx solid #DEDEDE;;

      .form-l {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
      }

      .form-r {
        margin-left: 48rpx;
        flex: 1;

        .picker {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .uni-input {
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
          }
        }
      }
    }

    .form:last-child {
      border-bottom: none;
    }
  }

  .open {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    margin-top: 22rpx;
    background-color: #fff;
    padding: 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .btn {
    position: absolute;
    bottom: 15rpx;
    left: 50%;
    transform: translateX(-50%);
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 80rpx;
    color: #FFFFFF;
    width: 686rpx;
    height: 80rpx;
    text-align: center;
    background: #645AED;
    opacity: 1;
    border-radius: 30rpx;
  }
}
</style>
